/*
 * @Author: zhangweixin 
 * @Date: 2018-11-14 09:51:06 
 * @Last Modified by: zhangweixin
 * @Last Modified time: 2018-12-18 16:03:42
 */
import React from "react";

import {BrowserRouter as Router, Route,Switch, Link} from 'react-router-dom';
import Bundle from './Bundle';

// import Home from 'pages/Index/index';
// import Page1 from 'pages/Page1/index';
// import Counter from 'pages/counter/index';
// import UserCenter from 'pages/UserCenter/index';

// import Home from 'bundle-loader?lazy&name=home!pages/Index/index';
// import Page1 from 'bundle-loader?lazy&name=page1!pages/Page1/index';
import Counter from 'bundle-loader?lazy&name=counter!pages/counter/index';
// import UserCenter from 'bundle-loader?lazy&name=userInfo!pages/UserCenter/index';
// import NotFound from 'bundle-loader?lazy&name=notFound!pages/notFound/index';
// import Login from 'bundle-loader?lazy&name=login!pages/login/index'
// import OrderList from 'bundle-loader?lazy&name=orderList!pages/orderList/index'
// import Skeleton from 'components/SkeletonScreen/index';

const Loading = function () {
  return <div>Loading...</div>
};

// const createComponent = (component) => (props) => (
//   <Bundle load={component}>
//       {
//           (Component) => Component ? <Component {...props} /> : <Loading/>
//       }
//   </Bundle>
// );
const createComponent = (component) => {
  
  return (props) => {
    
    return(
      <Bundle load={component}>
          {
              // (Component) => Component ? <Component {...props} /> : <Skeleton/>
              (Component) => Component ? <Component {...props} /> : ""
          }
      </Bundle>
    )
  }
};
// function createComponent(component){
//   return (props) => {
    
//     return(
//       <Bundle load={component}>
//           {
//               (Component) => Component ? <Component {...props} /> : <Loading/>
//           }
//       </Bundle>
//     )
//   }
// }
// es6 写法 以下两个一样
// const getRouter = () =>(
//   <Router>
//     <Switch>
//       <Route exact path="/" component={Home}/>
//       <Route path="/page1" component={Page1}/>
//     </Switch>
//   </Router>
// )
// const getRouter = () =>{
//   return(
//   <Router>
//     <Switch>
//       <Route exact path="/" component={Home}/>
//       <Route path="/page1" component={Page1}/>
//     </Switch>
//   </Router>
//   )
// }

const getRouter = () =>{
  return(
  // <Router>
    // {/* <Switch>
    //   <Route exact path="/" component={Home}/>
    //   <Route path="/page1" component={Page1}/>
    //   <Route path="/counter" component={Counter}/>
    //   <Route  path="/" component={UserCenter}/>
    // </Switch> */}
  // </Router>

  // exact关键字，将"/"做唯一匹配，否则"/"和"/xxx"都会匹配到path为"/"的路由，
  // 制定exact后，"/page1"就不会再匹配到"/"了。
  // <Router>
    <Switch>
    <Route  path="/counter" component={createComponent(Counter)}/>
      {/* <Route exact path="/" component={createComponent(Home)}/>
      <Route  path="/userCenter" component={createComponent(UserCenter)}/>
      <Route path="/page1" component={createComponent(Page1)}/>
      
      <Route path="/login" component={createComponent(Login)}/>
      <Route path="/orderList" component={createComponent(OrderList)}/>
      <Route component={createComponent(NotFound)}/> */}
    </Switch>
  // </Router>
  )
}

export default getRouter;
